<template>
  <hm-layout>
    <view class="order-wrap">
      <view class="order-list">
        <view class="order-item" v-for="item in orderList" :key="item._id">
          <view class="order-item_top">
            <view class="order-status">{{ item.status === 2 ? '已付款' : '未付款' }}</view>
            <view class="order-time">{{ vk.pubfn.timeFormat(item.create_time, 'yyyy-MM-dd hh:mm:ss') }}</view>
          </view>
          <view class="order-item_body">
            <view class="body-left">
               <u-image :src="item.temmplateInfo.previewUrl" width="60px" height="60px"></u-image>
               <view class="avatar-info">
                 <view class="avatar-name">{{ item.temmplateInfo.name }}</view>
                 <view class="order-type">{{ item.order_type === 'avatar' ? '下载头像' : '购买模板' }}</view>
               </view>
              
            </view>
            <view class="body-right ui-TC-Main">
              ￥{{ vk.pubfn.priceFilter(item.total_fee)}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </hm-layout>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  
  const orderList = ref([])
  
  onMounted(() => {
    vk.callFunction({
    	url: 'client/order/kh/orderList',
    	title: 'loading',
    	data: {},
    	success: (res) => {
    		orderList.value = res.data.rows
    	}
    });
  })
</script>

<style lang="scss">
.order-wrap {
  padding: 30rpx;
  background: var(--ui-BG-2);
  
  .order-list {
    .order-item {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background: #fff;
      border-radius:  16rpx;
      
      .order-item_top {
        display: flex;
        justify-content: space-between;
        padding-bottom: 16rpx;
      }
      
      .order-item_body {
        display: flex;
        justify-content: space-between;
        
        .body-left {
          display: flex;
          .avatar-info {
            display: flex;
            flex-direction: column;
            margin-left: 16rpx;
            .order-type {
              font-size: 20rpx;
              margin-top: 20rpx;
              color: #8e8e8e;
            }
          }
        }
        .body-right {
          display: flex;
          align-items: center;
        }
      }
    }
    
  }
}
</style>
